<template>
	<el-cascader ref="cascader" :disabled="isdisabled" v-model="area" :props="props" clearable @change="onAreaChange"
		placeholder="请选择区域"></el-cascader>
</template>
<script>
import { post } from "../assets/js/http"
export default {
	props: {
		value: {
			type: Array | Object,
			default: () => [],
		},
		isdisabled: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			area: [],
			props: {
				label: "name",
				value: "id",
				lazy: true,
				async lazyLoad(node, resolve) {
					const { level, value } = node
					if (level === 0) {
						const result = await post({
							url: "/api/common/getProvinceList",
							data: {},
						})
						resolve(result)
					} else if (level === 1) {
						const result = await post({
							url: "/api/common/getCityList",
							data: {
								province_id: value,
							},
						})
						resolve(result)
					} else if (level === 2) {
						const result = await post({
							url: "/api/common/getAreaList",
							data: {
								city_id: value,
							},
						})
						result.forEach((item) => (item.leaf = true))
						resolve(result)
					} else if (level === 3) {
						const result = await post({
							url: "/api/common/getStreetList",
							data: {
								area_id: value,
							},
						})
						resolve([])
					}
				},
			},
		}
	},
	watch: {
		value: {
			deep: true,
			immediate: true,
			handler(val) {
				this.$set(this, "area", val)
			},
		},
	},
	methods: {
		onAreaChange() {
			this.$emit("input", this.area)
		},
	},
}
</script>
